<template>
  <div>

    <van-nav-bar
        title="服务详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
        <img src="https://hh666.oss-cn-beijing.aliyuncs.com/ffb5bb8fa0fffa31a5a9fb05a0beaffb.jpeg"
             style="width: 100%; height: 260px;"/>

        <van-card
            :title="standardOne.xiche"
        >
          <template #tags>
            <van-tag plain type="danger">未消费，随时退</van-tag>
            <van-tag plain type="danger">过期退</van-tag>
            <van-tag plain type="default" style="right: -170px;">已售600+</van-tag>
          </template>
        </van-card>
        <van-field
            rows="2"
            autosize
            label="套餐介绍"
            type="textarea"
            placeholder="
          整车泡沫冲洗擦干、轮胎轮毂冲洗清洁、车内吸尘、内饰脚垫等简单除尘"
            show-word-limit
            readonly
        />
        <div style="width: 100% ;  line-height: 40px;">
          <span class="zuo">{{ standardOne.xiche }}</span>
          <div class="you">
          <span style="float: right;">门市价 ￥{{ standardOne.menshi }}</span> <br>
          <span style="float: right; "><span style="color: red;">平台优惠</span>-￥5</span> <br>
          <span style="float: right; "><span style="color: red;">优惠卷</span> -￥5</span> <br>
          <span style="float: right;">实付  ￥{{ standardOne.jiage }}</span>
          </div>
        </div>

        <div class="qianggoou3">
          <van-cell-group >
            <van-card>
              <template #tags>
                <span class="jiage"><span >当前价格:</span> <span class="daxiao">{{standardOne.jiage}}</span></span>
                <span class="zhekou"><span >折扣前:</span><span class="daxiao1"><s>{{standardOne.menshi}}</s></span></span>
                <span class="ti"><van-button class="tijiao" @click="tijiao()">提交订单</van-button></span>
              </template>
            </van-card>
          </van-cell-group>
        </div>



  </div>
</template>

<script>
import {findUserById} from "@/api/wode/user";

export default {
  data() {
    return {
      standardOne: {},
      id: null,
      active: 0,
      user: {},
      orderInfo:{},

    }
  },
  methods: {
    findUserById() {
      findUserById(localStorage.getItem('token')).then(res => {
        if (res.code == 208) {
          this.$message.error(res.message)
          localStorage.removeItem('token')
          this.$router.push('/')
        }
        this.user = res.data

      }).catch(error => {
        console.log(error)
      })
    },
    tijiao(){
      this.orderInfo.ordermdname = this.standardOne.mdname
      this.orderInfo.price = this.standardOne.menshi
      this.orderInfo.userId = this.user.id
      this.orderInfo.discount = Number(this.standardOne.menshi) - Number(this.standardOne.jiage)
      this.orderInfo.photo = "https://hh666.oss-cn-beijing.aliyuncs.com/ffb5bb8fa0fffa31a5a9fb05a0beaffb.jpeg"
      this.$router.push({path: '/Wxprice', query: this.orderInfo})
      this.$router.push({path: '/Wxprice', query: {id: this.id}})
    },
    findStandardOne() {
      this.axios.get(`http://1.94.221.254:9999/api-qcfw-mendian/home/standard/findStandardOne/${this.id}`).then(res => {
        this.standardOne = res.data.data
        console.log(res.data.data)
        console.log(this.standardOne)
      })
    },
    onClickLeft() {
      this.$router.push('/qingxi')
    },
  },
  created() {
    this.id = this.$route.query.id
    console.log(this.id)
    this.findStandardOne()
    var token = localStorage.getItem('token');
    if (token === null) {
      this.$router.push('/');
    }
  }
}
</script>


<style scoped>
.qianggoou3{
  height: 10px;
  padding-top: 70px;
}
.zuo{
  padding-left: 15px;
}
.you{
  padding-right: 15px;
}
.qianggoou2{
  height: 20px;
  margin-top:27px;
}
.jiage{
  padding-left: 10px;
  padding-top: 70px;
  float: left;

}
.zhekou{
  margin-left: 10px;
  padding-top: 70px;
}

.ti{
  margin-top: 50px;
  float: right;
}
.tijiao{
  border-radius: 30px;
  width: 130px;
  background-color: #FB4D03;
  color: white;
}
.daxiao{
  font-size: 22px;
  color: red;
}
.daxiao1{
  font-size: 15px;
  color: #c61b1b;
}
</style>
